<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=OMGjSKF6dQFVGfISVkdlPOf9DL45DCQ9"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<title>中国人口密度分布图</title>
</head>
<body>
	<div id="allmap"></div>
</body>
<script type="text/javascript">
	//百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398, 39.897445);
	map.centerAndZoom(point, 12);
	map.enableScrollWheelZoom(); // 允许滚轮缩放

	//根据IP来定位
	function myFun(result) {
		var cityName = result.name;
		map.setCenter(cityName);
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
	
	//打开热力图
	//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
	//参数说明如下:
	/* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小   
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
			.2:'rgb(0, 255, 255)',
			.5:'rgb(0, 110, 255)',
			.8:'rgb(100, 0, 255)'
		}
		其中 key 表示插值的位置, 0~1.
		    value 为颜色值. 
     */
	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":15});
	map.addOverlay(heatmapOverlay);
	
	//获取热力数据
	$.ajax({
        type: "GET",
        url: "renkou",
        data: {},
        dataType: "json",
        success: function(data){
        	console.log(data);
        	setGradient();
        	heatmapOverlay.setDataSet({data:data['list'],max:100});
        }
	});
    function setGradient() {
        /*格式如下所示:
        {
              0:'rgb(102, 255, 0)',
              .5:'rgb(255, 170, 0)',
              1:'rgb(255, 0, 0)'
        }*/
        var gradient = { 0.5: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"};
        heatmapOverlay.setOptions({ "gradient": gradient });

    }
	
</script>
</html>
